<template>
    <div id="app">
        <h1 class="title">本周热搜TOP5</h1>
        <ul class="topic-list">
            <li class="topic-item" v-for="(topic, index) in topics" :key="index">
                <span class="topic-name">{{ topic.name }}</span>
                <span class="topic-heat">{{ topic.heat }}</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            topics: [
                { name: '#区块链', heat: 96 },
                { name: '#数据挖掘', heat: 91 },
                { name: '#无人机', heat: 87 },
                { name: '#生命科学', heat: 72 },
                { name: '#传感器', heat: 60 },
            ],
        };
    },
};
</script>

<style>
#app {
    width: 300px;

    .title {
        background-color: #00afff;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .topic-list {
        list-style: none;
        padding: 0;
    }

    .topic-item {
        border-radius: 1px solid #ddd;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
    }


    .topic-name {
        font-size: 18px;
    }

    .topic-heat {
        font-size: 16px;
        margin-left: 10px;
    }

    .topic-heat::after {
        content: "🔥";

    }
}
</style>